<template>
	<div id="content" style="height: 100%;">
		<div class="displayFlexBet mb20">
			<div></div>
			<div style="font-size: 20px;font-weight: bold;text-align: center;color: #999;">
				{{leftSelectItem.title}}
			</div>
			<div style="color:#999">
				<div v-if="documentDet.receiveTime" class="mb5">
					<span>获取时间</span>
					<span>{{documentDet.receiveTime.split(" ")[0]}}</span>
				</div>
				<div v-if="documentDet.endTime">
					<span>失效时间</span>
					<span>{{documentDet.endTime.split(" ")[0]}}</span>
				</div>
			</div>
		</div>
		
		<div v-if="pdfUrls && pdfUrls.length > 0">
			<!-- <pdf ref="pdf" :src="pdfUrls[0].pdfUrl" :page="1" /> -->
			<img v-for="(img,index) in pdfUrls" :key="index" :src="img" style="width: 100%;" />
		</div>

		<div v-else style="text-align: center;">
			<img src="@/assets/bIcon7.png" style="width: 70px;height: 70px;margin-top: 200px;" />
			<div style="font-weight: bold;font-size: 20px;margin-top: 10px;color: #999999;">
				暂无文件
			</div>
		</div>

		<div style="position: fixed;right: 50px;top: 30%;font-weight: bold;color: #333;">
			<div @click="uploadInfo('add')" class="rightButton">
				<img src="@/assets/sIcon24.png" style="width: 60px;height: 34px;" />
				<div>更新</div>
			</div>

			<div @click="showBeizhu" class="rightButton" v-if="leftSelectItem.itemType != 'CUSTOMIZE'">
				<img src="@/assets/sIcon25.png" style="width: 60px;height: 34px;" />
				<div>评价</div>
			</div>

			<div @click="uploadInfo('edit')" class="rightButton" v-if="leftSelectItem.categoryType == 'COMMON'">
				<img src="@/assets/sIcon26.png" style="width: 60px;height: 34px;" />
				<div>修改</div>
			</div>

			<div @click="tableData.visible = true,getHistory()" class="rightButton"
				v-if="leftSelectItem.categoryType != 'DRAFT'">
				<img src="@/assets/sIcon27.png" style="width: 60px;height: 34px;" />
				<div>历史</div>
			</div>

			<div @click="showBookMark" class="rightButton">
				<img src="@/assets/sIcon28.png" style="width: 60px;height: 34px;" />
				<div>书签</div>
			</div>

			<div @click="saveOrRemoveNotInvolveDocument" class="rightButton">
				<img src="@/assets/sIcon41.png" style="width: 60px;height: 34px;" />
				<div v-if="isInvolve.result">不涉及</div>
				<div v-else>涉及</div>
			</div>
		</div>

		<!--备注-->
		<questions v-if="documentId" ref="questions" :categoryItemId="leftSelectItem.id" :documentId="documentId"
			@close="closeDia" :leftSelectItem="leftSelectItem"></questions>

		<!--历史版本-->
		<el-dialog :visible.sync="tableData.visible" width="1200px" :title="leftSelectItem.title+'的文件列表'">
			<el-table :data="tableData.list" border style="width:100%" size="mini">
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="statusStr" label="状态"></el-table-column>
				<el-table-column prop="receiveTime" label="领取时间">
					<template scope="scope">
						<span v-if="scope.row.receiveTime">{{scope.row.receiveTime.split(" ")[0]}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="endTime" label="截止时间"></el-table-column>
				<el-table-column prop="createTime" label="创建时间"></el-table-column>
				<el-table-column width="120" label="操作">
					<template scope="scope">
						<el-button type="text" @click="previewFile(scope.row)">查看</el-button>
						<el-button style="color: #F56C6C;" v-if="scope.row.status =='EFFECTIVE'" type="text"
							@click="effectOrInvalidDocument(scope.row)">失效</el-button>
						<el-button v-else type="text" @click="effectOrInvalidDocument(scope.row)">生效</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</el-dialog>

		<!--书签列表-->
		<el-dialog :visible.sync="bookMark.visible" width="900px" :title="leftSelectItem.title+'的书签列表'">
			<div class="displayFlexBet" style="margin-bottom: 20px;">
				<div></div>
				<el-button type="primary" @click="addBookMark" size="small">+ 新增书签</el-button>
			</div>
			<el-table :data="bookMark.dataList" border style="width:100%" size="mini">
				<el-table-column prop="markName" label="书签名称"></el-table-column>
				<el-table-column prop="markIndex" label="书签码"></el-table-column>
				<el-table-column prop="fileUrl" label="预览图(点击即可查看)">
					<template scope="scope">
						<el-image style="width: 50px; height: 50px" :src="pdfUrls[scope.row.markIndex-1]"
							:preview-src-list="pdfUrls">
						</el-image>
					</template>
				</el-table-column>

				<el-table-column width="120" label="操作">
					<template scope="scope">
						<el-button type="text" @click="deleteBookMark(scope.row)">
							<span style="color: #F56C6C;">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog :visible.sync="bookMark.add.visible" width="500px" :title="leftSelectItem.title+'的书签'">
			<el-form ref="form" label-width="80px">
				<el-form-item label="书签名称">
					<el-input v-model="bookMark.add.markName"></el-input>
				</el-form-item>
				<el-form-item label="书签页码">
					<el-input v-model="bookMark.add.markIndex" type="Number" :min="1" :max="pdfUrls.length"></el-input>
				</el-form-item>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveBookMark">保存书签</el-button>
				</div>
			</el-form>
		</el-dialog>

	</div>
</template>

<script>
	import $ from 'jquery'
	import pdf from 'vue-pdf'
	import questions from '@/components/view/questions'

	let that
	export default {
		name: 'pdfView',
		props: ['leftSelectItem'],
		components: {
			pdf,
			questions
		},
		data() {
			return {
				fileViewUrl: this.baseURL +
					'wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				//pdfUrl: 'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
				pdfUrls: [],
				pdfUrl: "",
				numPages: 1,
				params: {
					categoryMainId: '',
					ticketId: '',
					itemId: ''
				},

				tableData: {
					visible: false,
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},

				bookMark: {
					visible: false,
					dataList: [],
					add: {
						visible: false,
						markIndex: 1,
						markName: '',
					}
				},

				isInvolve: {
					result: false,
				},

				documentId: '',
				fileId: '',
				documentDet:{}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.categoryMainId = that.getQueryString("categoryMainId")
			that.params.ticketId = that.$store.state.token
			that.params.itemId = that.getQueryString("itemId")
			
			console.log(that.leftSelectItem)

			that.getEffectiveDocumentRecordByCustomerId()
			that.isDocumentNotInvolve()
		},
		methods: {


			saveOrRemoveNotInvolveDocument() {
				that.ajax({
					url: '/document/saveOrRemoveNotInvolveDocument',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						itemId: that.params.itemId,
					},
					success: function(result) {
						that.isInvolve.result = !that.isInvolve.result
					}
				})
			},

			isDocumentNotInvolve() {
				that.ajax({
					url: '/document/isDocumentNotInvolve',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						itemId: that.params.itemId,
					},
					success: function(result) {
						that.isInvolve.result = result.data
					}
				})
			},

			effectOrInvalidDocument(item) {
				that.ajax({
					url: 'document/effectOrInvalidDocument',
					data: {
						recordId: item.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.getEffectiveDocumentRecordByCustomerId()
					},
				})
			},

			//添加标签
			addBookMark() {
				that.bookMark.add.markIndex = 1
				that.bookMark.add.markName = ""
				that.bookMark.add.visible = true
			},

			//保存书签
			saveBookMark() {
				that.ajax({
					url: '/document/saveOrUpdateDocumentEntMark?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						documentId: that.documentId, // 档案id
						fileId: that.fileId, // 档案文件id
						markIndex: that.bookMark.add.markIndex, // 书签页码，数字
						markName: that.bookMark.add.markName, // 书签页码，数字
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						that.showBookMark()
						that.bookMark.add = {
							visible: false,
							markIndex: 1,
							markName: '',
						}
					},
				})
			},


			//删除书签
			deleteBookMark(item) {
				that.ajax({
					url: '/document/deleteDocumentEntMark?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						id: item.id, // 档案id
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						that.showBookMark()
					},
				})
			},

			previewFile(item) {
				that.documentId = item.id
				that.fileId = item.fileId
				that.getFileList(item.fileId)
				that.tableData.visible = false
			},

			handleSizeChange: function(val) {
				this.tableData.pageIndex = 1;
				this.tableData.pageSize = val;
				this.getHistory();
			},

			handleCurrentChange: function(val) {
				this.tableData.pageIndex = val;
				this.getHistory();
			},

			showBookMark() {
				const _this = this;
				that.ajax({
					url: '/document/getDocumentEntMarkList?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						documentId: that.documentId, // 档案id
						fileId: that.fileId, // 档案文件id
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						if (result.status == 1) {
							that.bookMark.visible = true
							_this.bookMark.dataList = result.data
						} else {
							that.$message(result.infoList[0], {
								status: 'info',
								timeout: 2500
							});
						}
					}
				});
			},

			//历史版本点击
			getHistory() {
				const _this = this;
				that.ajax({
					url: '/document/pageDocumentEntCategoryRecord?ticketId=' + that.params.ticketId +
						'&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that.tableData.pageSize,
					data: JSON.stringify({
						categoryItemId: that.leftSelectItem.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						if (result.status == 1) {
							_this.tableData.list = result.data.records;
							_this.tableData.total = result.data.total;
						} else {
							that.$message(result.infoList[0], {
								status: 'info',
								timeout: 2500
							});
						}
					}
				});
			},

			//上传点击
			uploadInfo(optionType) {
				that.$emit("uploadInfo", optionType)
			},

			closeDia() {
				that.$emit("closeDia", true)
			},

			//备注点击
			showBeizhu() {
				if (that.pdfUrls.length == 0) {
					return that.$message({
						message: '暂未上传文件',
						type: 'warning'
					});
				}
				that.$refs.questions.open()
			},

			//获取最新档案列表
			getEffectiveDocumentRecordByCustomerId() {
				that.ajax({
					url: '/document/getEffectiveDocumentRecordByCustomerId?ticketId=' + that.params
						.ticketId,
					data: JSON.stringify({
						categoryItemId: that.leftSelectItem.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.status == 1) {
							if (result.data) {
								that.documentDet = result.data
								that.documentId = result.data.id
								that.fileId = result.data.fileId
								that.getFileList(result.data.fileId)
							}
						}
					}
				});
			},


			getFileList(fileId) {
				$.ajax({
					url: 'https://www.weifeibangbang.com/tsysFile/getPreviewFileIdListByFileId?ticketId=' +
						that.params.ticketId,
					data: {
						fileId: fileId,
					},
					contentType: 'application/x-www-form-urlencoded',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						that.pdfUrls = []
						for (let item of result.data) {
							that.pdfUrls.push(that.fileViewUrl + item)
						}
						//console.log(that.pdfUrls)
					},
				})
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>